<template>

	<view class="mycollecting">

		<!-- 上面动态切换 -->
		<view class="title-view">
			<text @tap="changeIndex(index)" class="text-view" :class="{'active':currentIndex==index}"
				v-for="(item,index) in list" :key="item">{{item}}</text>
		</view>

		<!-- 下面滑块 -->
		<swiper class="mycollecting-swiper" :current-item-id="currentIndex" @change="changetab">
			<!-- 商品相关内容 -->
			<swiper-item item-id="0">
				<view class="product-swiperitem">
					<view class="mycollecting-product">
						<image class="mycollecting-proimg" src="../../static/images/lrx/image_shoucangtu1.png" mode="">
						</image>
						<view class="mycollecting-protitle">
							<view class="mycollecting-titleone">
								KOMEITO车载香水
							</view>
							<view class="mycollecting-titlesec">
								磨砂合金
							</view>
							<view class="mycollecting-titlethird">
								￥<text class="mycollecting-titlered">60</text>
							</view>
						</view>
					</view>
					<view class="mycollecting-product">
						<image class="mycollecting-proimg" src="../../static/images/lrx/image_shoucangtu2.png" mode="">
						</image>
						<view class="mycollecting-protitle">
							<view class="mycollecting-titleone">
								阿卡噜(akroo)车载香水汽车香水中...
							</view>
							<view class="mycollecting-titlesec">
								磨砂黑
							</view>
							<view class="mycollecting-titlethird">
								￥<text class="mycollecting-titlered">70</text>
							</view>
						</view>
					</view>
				</view>

			</swiper-item>

			<swiper-item item-id="1">文章</swiper-item>
		</swiper>

	</view>


</template>



<script>
	export default {
		data() {
			return {
				list: ["商品", "文章"],
				currentIndex: 0,
			}
		},
		methods: {
			changeIndex(index) {
				this.currentIndex = index;
			},
			changetab(e) {
				this.currentIndex = e.detail.currentItemId;
			}
		}
	}
</script>

<style scoped lang="scss">
	.mycollecting {

		//标题栏
		.title-view {
			background-color: white;
			height: 80rpx;
			margin-bottom: 30rpx;
			border-bottom-left-radius: 30rpx;
			border-bottom-right-radius: 30rpx;
			display: flex;
			justify-content: space-around;

			.text-view {
				line-height: 80rpx;
				text-align: center;
			}
		}

		// 激活
		.active {
			border-bottom: 5rpx solid #ff8038;
		}

		.mycollecting-swiper {
			height: 600rpx;
		}

		// 商品
		.product-swiperitem {
			.mycollecting-product {
				background-color: white;
				margin-bottom: 20rpx;
				border-radius: 30rpx;
				height: 200rpx;
				padding: 20rpx;
				display: flex;

				// 商品图片信息
				.mycollecting-proimg {
					width: 150rpx;
					height: 150rpx;
					margin-right: 20rpx;
				}

				// 商品右边文字信息 
				.mycollecting-protitle {
					.mycollecting-titleone {
						font-size: 30rpx;
						margin-bottom: 10rpx;
					}

					.mycollecting-titlesec {
						font-size: 24rpx;
						color: gray;
					}

					.mycollecting-titlethird {
						font-size: 32rpx;
						height: 100rpx;
						line-height: 100rpx;

						.mycollecting-titlered {
							height: 100rpx;
							line-height: 100rpx;
							color: #ef1010;
							font-size: 50rpx;
						}
					}
				}
			}
		}

	}
</style>
